<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>137_元素节点</title>

	</head>
	<body>
		<button id="btn">点位一下</button>
		<span class="sp">11我是span</span>
		<span class="sp">11我是span</span>

		<div>div</div>
		<div>div</div>
		<div>div</div>
		<form>
			<input type="text" name="username" />
			<input type="radio" name="gender" value="male" />男
			<input type="radio" name="gender" value="male" />女
		</form>
		<script>
			/* 
				元素节点对象(element)
					-在网页中，每一个标签都是一个元素节点
					如何获取元素节点对象?
						1.通过document对象来获取元素节点
						2.通过document对象来创建元素节点
					-通过document来获取已有的元素节点:
						document.getElementById( )
							- 根据id获取一个元素节点对象
						document.getElementsByClassName()
							- 根据元素的class属性值获取一组元素节点对象
							- 返回的是一个类数组对象
							- 该方法返回的结果是一个实时更新的集合
							- 当网页中新添加元素时，集合也会实时的刷新
						document.getElementsByTagName()
							根据标签名获取一组元素节点对象
							- 返回的结果是可以实时更新的集合
							- document.getElementsByTagName("*") 获取页面中所有的元素
						document.getElementsByName()
							-根据name属性获取一组元素节点对象
							- 返回一个实时更新的集合
							-主要用于表单项
						getElements 这些带有s的都是实时更新的集合。
						
						document.querySelectorAll()
							-根据选择器去页面中查询元素
							-id选择器加 #，类选择器加.。
							-会返回一个类数组(不会实时更新)
						document.querySelector()
							- 根据选择器去页面中查询第一个符合条件的元素
							
						创建一个元素节点
							-document.createElement()
							- 根据标签名创建一个元素节点对象
			 */
			console.log(document.body);

			const sp = document.getElementsByClassName("sp")
			for (let i = 0; i < sp.length; i++) {
				sp[i].innerText = "哈哈哈" + i
			}

			let div = document.getElementsByTagName("div") //[div, div, div, div, div]
			div = document.getElementsByTagName("*") //获取页面中所有标签

			let div2 = document.querySelectorAll(".sp")

			console.log(div2);
		</script>
	</body>
</html>